import React from 'react';
import { Button,ButtonGroup,ButtonToolbar,Grid,Row,Col,Thumbnail,Panel,Well,Image } from 'react-bootstrap';
var Loading = require('react-loading');
import {bangumiApi} from '../apis/bangumi.js';
//分类排行查看
var SortView= React.createClass({
  getInitialState: function () {
    return {
      sortList:[]
    }
  },
  componentWillReceiveProps:function(nextProps){
	  this.props.params.tid =nextProps.params.tid
	  this.props.params.page =nextProps.params.page
	   this.props.params.pagesize =nextProps.params.pagesize
	  this.componentWillMount()
  },
  componentWillMount:function(){
	  
	  this.setState({loaded:false});
	  
	  bangumiApi.getSortList(this.props.params.tid,this.props.params.page,this.props.params.pagesize)
      .then(function (ret) {
		
		this.setState({
		  sortList :ret.list,
		  pages:ret.pages,
		  page:this.props.params.page,
		  loaded:true
        })
		
      }.bind(this))
  },
  render:function(){
	 // return <a>{this.props.params.tid}</a>
	 var cur_page=this.props.params.page
	 if(this.state.loaded){
		 var indexs =[];
		 if(this.state.pages<=50){
		  for(var i=1;i<=this.state.pages;i++){
			indexs.push(
			  {
				   i:i,
                   url:"#/sort/"+this.props.params.tid+"/"+this.props.params.sortname+"/"+i+"/10",
				   disabled:false
			  }
			)
		  }
		 }
		 else{
		   
		      if(cur_page<=10){
			  
			      for(var i=1;i<=parseInt(cur_page)+5;i++){
			           indexs.push({
				        i:i,
                        url:"#/sort/"+this.props.params.tid+"/"+this.props.params.sortname+"/"+i+"/10",
				        disabled:false
			           } )
		          }
				  indexs.push({
				      i:"..",
					  url:"",
					  disabled:true
				  })
				  indexs.push({
				      i:this.state.pages,
					  url:"#/sort/"+this.props.params.tid+"/"+this.props.params.sortname+"/"+this.state.pages+"/10",
					  disabled:false
				  })
			  }
			  else{
			  
			      indexs.push({
				      i:1,
					  url:"#/sort/"+this.props.params.tid+"/"+this.props.params.sortname+"/1/10",
					  disabled:false
				  });
				  indexs.push({
				      i:"..",
					  url:"",
					  disabled:true
				  })
				  for(var i=parseInt(cur_page)-5;i<=parseInt(cur_page)+5 && i<=this.state.pages;i++){
			           indexs.push({
				        i:i,
                        url:"#/sort/"+this.props.params.tid+"/"+this.props.params.sortname+"/"+i+"/10",
				        disabled:false
			           } )
		          }
				  if(parseInt(cur_page)+5<this.state.pages){
				      indexs.push({
				      i:"..",
					  url:"",
					  disabled:true
				      })
					  indexs.push({
				      i:this.state.pages,
					  url:"#/sort/"+this.props.params.tid+"/"+this.props.params.sortname+"/"+this.state.pages+"/10",
					  disabled:false
				      })
				  }
			  
			  }
		 }
	 
	 
	 return (
	 
	     <Panel header={this.props.params.sortname}>  
		
		     
                <Grid>
                 <Row>
		          {
			           this.state.sortList.map(function (s) {
						     var url ="#/movie/"+s.aid;
                             return (
							    <Col xs={6} md={4}>
                                   <Thumbnail src={s.pic} alt="242x200"  href={url}>
                                        <h5>{s.title}</h5>
                                   </Thumbnail>
                                </Col>
							 )
                       })
		          }
          
                 </Row>
				 <Row>
				     <ButtonToolbar>
					    <ButtonGroup>
						{
                           indexs.map(function(s){
							   if(s.i==cur_page)
							   return (
							     <Button href={s.url}  bsStyle="primary">{s.i}</Button>
							   )
							   else
								   return (
							     <Button href={s.url} >{s.i}</Button>
							   )
						   })
						}
                        </ButtonGroup>
					  </ButtonToolbar>
				 </Row>
	            </Grid>
         </Panel>
	 
	 )
	 }
	 else
		return (
	       <Panel header={this.props.params.sortname}>  
		      <Loading type='balls' color='#e3e3e3' />
            </Panel>
	    )
  }
});


export {SortView}